<template>
    <div>
        <template>
            <div style="border: 1px solid #ccc;" class="fuwenb">
                <Toolbar
                    style="border-bottom: 1px solid #ccc"
                    :editor="editor"
                    :defaultConfig="toolbarConfig"
                    :mode="mode"/>
                <Editor
                    style="height: 330px; overflow-y: hidden;"
                    v-model="html"
                    :defaultConfig="editorConfig"
                    :mode="mode"
                    @onCreated="onCreated"/>
            </div>
            <div class="btn">
                <button @click="send">确认</button>
            </div> 
        </template>
    </div>
</template>

<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default Vue.extend({
    name:'MyEditor',
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '',
            toolbarConfig: { },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'simple', // or 'simple default'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
        send() {
          console.log(this.html);
          this.$emit('xiaoxi', this.html);
        }
    },
    mounted() {
        
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.fuwenb{
    width: 99.5vw;
}
.btn{
    background-color: #fff;
    margin-top: 15px;
    button{
        width: 60vw;
        height: 41px;
        margin-left: 18vw;
        background-color: #78b2ff;
        border: none;
        border-radius: 16px;
        font-size: 17px;
        color: #e3e3e3;
    }
}
</style>